<script setup>
import {getCurrentInstance} from 'vue'
import {useSys} from '@/hooks/useSys'
import {queryNodeRect} from '@/utils/uni-api-wrap/page'

const instance = getCurrentInstance()

const props = defineProps({
  styles: {
    type: Object,
    default: () => ({})
  },
  stickyHeaderFooter: {
    type: Boolean,
    default: true
  },
})

const { screenHeight, safeArea } = useSys()

const _headerPlaceholderSize = ref(0)
const _footerPlaceholderSize = ref(0)
const _contextPlaceholderSize = ref(0)

const placeholderSize = computed(() => _headerPlaceholderSize.value + _footerPlaceholderSize.value)

const minHeight = computed(() => screenHeight.value - placeholderSize.value)

const top = computed(() => ({ top: `${_headerPlaceholderSize.value}px` }))
const bottom = computed(() => ({ bottom: `${_footerPlaceholderSize.value}px` }))

const fetchHeaderElementSize = () => nextTick(async () => {
  const result = await queryNodeRect('#header-ref', instance)
  if (result) {
    const { height } = result
    _headerPlaceholderSize.value = height
  }
})

const fetchContextElementSize = () => nextTick(async () => {
  const result = await queryNodeRect('#context-ref', instance)
  if (result) {
    const { height } = result
    _contextPlaceholderSize.value = height
  }
})
const fetchFooterElementSize = () => nextTick(async () => {
  const result = await queryNodeRect('#footer-ref', instance)
  if (result) {
    const { height } = result
    _footerPlaceholderSize.value = height
  }
})

const fetchElementSize = () => {
  fetchHeaderElementSize()
  fetchFooterElementSize()
  fetchContextElementSize()
}

onUpdated(() => fetchElementSize())

watch(props, () => fetchElementSize())

onMounted(fetchElementSize)

defineExpose({
  fetchElementSize
})

</script>

<template>
  <view class="page-container" :style="{ ...props.styles }">
    <view id="header-ref" class="header-container" :class="{ 'header-container__sticky': props.stickyHeaderFooter }">
      <slot name="header" :headerPlaceholderSize="_headerPlaceholderSize" :contextPlaceholderSize="_contextPlaceholderSize" :footerPlaceholderSize="_footerPlaceholderSize" :placeholderSize="placeholderSize" :top="top" :bottom="bottom" :minHeight="minHeight"></slot>
    </view>
    <view id="context-ref" class="context-container" :style="{ minHeight: `calc(100vh - ${placeholderSize}px)` }">
      <slot name="context" :headerPlaceholderSize="_headerPlaceholderSize" :contextPlaceholderSize="_contextPlaceholderSize" :footerPlaceholderSize="_footerPlaceholderSize" :placeholderSize="placeholderSize" :top="top" :bottom="bottom" :minHeight="minHeight"></slot>
    </view>
    <view id="footer-ref" class="footer-container" :class="{ 'footer-container__sticky': props.stickyHeaderFooter }">
      <slot name="footer" :headerPlaceholderSize="_headerPlaceholderSize" :contextPlaceholderSize="_contextPlaceholderSize" :footerPlaceholderSize="_footerPlaceholderSize" :placeholderSize="placeholderSize" :top="top" :bottom="bottom" :minHeight="minHeight"></slot>
    </view>
    <slot></slot>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  box-sizing: border-box;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 0;
}
.header-container:empty {
  display: none;
}
.header-container__sticky {
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 88;
}
.context-container {
}
.footer-container:empty {
  display: none;
}
.footer-container__sticky {
  position: sticky;
  width: 100%;
  bottom: 0;
  z-index: 88;
  //background-color: $kaoyan-color-14;
}
</style>
